<template>
  <div>
    <div>
      <el-row>
        <el-col :span="6" class="mr-20 ">
          <deviceInfoCard
            :deviceInfo="deviceInfo"/>
        </el-col>
        <el-col :span="16">
          <el-card class="index-card">
            <el-button class="morenbtn" @click.native="checkShow = true" v-if="checkIsVisible">
              新增
            </el-button>
            <el-button class="morenbtn2">
              导出
            </el-button>
            <el-tabs v-model="activeName">
              <el-tab-pane label="检测记录" name="check">
                <el-card class="gray-card no-border no-margin-top" shadow="never">

                  <el-table
                    v-loading="loading"
                    :data="checkList"
                    style="width: 100%;"
                  >
                    <el-table-column label="检验编号" align="center" prop="detectionNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="患者姓名" align="center" prop="patientName" :show-overflow-tooltip="true"/>
                    <el-table-column label="检验项目" align="center" prop="projectName"/>
                    <el-table-column label="检验时间" align="center" prop="detectionTime" :show-overflow-tooltip="true"/>
                    <el-table-column label="检验结果" align="center" prop="result" :show-overflow-tooltip="true"/>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          @click="handleForceLogout(scope.row)"
                          v-hasPermi="['monitor:online:forceLogout']"
                        >查看
                        </el-button>
                        <el-button
                          size="mini"
                          type="text"
                          @click="handleForceLogout(scope.row)"
                          v-hasPermi="['monitor:online:forceLogout']"
                        >下载
                        </el-button>
                        <el-button
                          size="mini"
                          type="text"
                          @click="handleForceLogout(scope.row)"
                          v-hasPermi="['monitor:online:forceLogout']"
                        >打印
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
                <pagination v-show="checkTotal>0" :total="checkTotal"
                            :page.sync="checkParams.pageNum"
                            :limit.sync="checkParams.pageSize"
                            @pagination="getCheckList"/>

              </el-tab-pane>
              <el-tab-pane label="室内质控" name="inDoor">
                <el-card class="gray-card no-border no-margin-top" shadow="never">
                  <el-table
                    v-loading="inDoorloading"
                    :data="inDoorList"
                    style="width: 100%;"
                  >
                    <el-table-column label="检验项目" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                    <el-table-column label="当前质控结果" align="center" prop="qualityStatus" :show-overflow-tooltip="true"/>
                    <el-table-column label="所属科室" align="center" prop="deptName"/>
                    <el-table-column label="当前在用质控品批号" align="center" prop="qualityNo"/>
                  </el-table>
                </el-card>
                <pagination v-show="inDoorTotal>0" :total="inDoorTotal"
                            :page.sync="inDoorParams.pageNum"
                            :limit.sync="inDoorParams.pageSize"
                            @pagination="getInDoorList"/>
              </el-tab-pane>
              <el-tab-pane label="室间质评" name="qualitative"></el-tab-pane>
              <el-tab-pane label="设备一致性对比" name="comparison">
                <el-card class="gray-card no-border no-margin-top" shadow="never">
                  <el-table
                    v-loading="comparisonLoading"
                    :data="comparisonList"
                    style="width: 100%;"
                  >
                    <el-table-column label="比对类型" align="center" prop="checkNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="基准仪器名称" align="center" prop="instrumentNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="基准仪器编号" align="center" prop="instrumentName"/>
                    <el-table-column label="比对仪器名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                    <el-table-column label="比对仪器编号" align="center" prop="projectResult" :show-overflow-tooltip="true"/>
                    <el-table-column label="所属科室" align="center" prop="officeName"/>
                    <el-table-column label="操作人" align="center" prop="checkUserName"/>
                    <el-table-column label="审核人" align="center" prop="checkStatus"/>
                    <el-table-column label="比对时间" align="center" prop="createTime"/>
                  </el-table>
                </el-card>
                <pagination v-show="comparisonTotal>0"
                            :total="comparisonTotal"
                            :page.sync="comparisonParams.pageNum"
                            :limit.sync="comparisonParams.pageSize"
                            @pagination="getInDoorList"/>
              </el-tab-pane>
              <el-tab-pane label="检验科比对" name="clinical"></el-tab-pane>
              <el-tab-pane label="失控记录" name="out">
                <el-card class="gray-card no-border no-margin-top" shadow="never">
                  <el-table
                    v-loading="outLoading"
                    :data="outList"
                    style="width: 100%;"
                  >
                    <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                    <el-table-column label="仪器名称" align="center" prop="instrumentName" :show-overflow-tooltip="true"/>
                    <el-table-column label="质控品批号" align="center" prop="qualityNo"/>
                    <el-table-column label="报告人" align="center" prop="leader" :show-overflow-tooltip="true"/>
                    <el-table-column label="处理人" align="center" prop="handler" :show-overflow-tooltip="true"/>
                    <el-table-column label="失控时间" align="center" prop="processTime"/>
                  </el-table>
                </el-card>
                <pagination v-show="outTotal>0" :total="outTotal"
                            :page.sync="outParams.pageNum"
                            :limit.sync="outParams.pageSize"
                            @pagination="getOutList"/>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <el-card class="index-card">
            <el-button class="morenbtn" @click.native="maintenanceShow = true" v-if="maintenanceIsVisible">
              新增
            </el-button>
            <el-button class="morenbtn2">
              导出
            </el-button>
            <el-tabs v-model="activeName2">
              <el-tab-pane label="售后维护" name="afterSale">
                <el-card class="gray-card no-border no-margin-top" shadow="never">

                  <el-table
                    v-loading="afterLoading"
                    :data="afterList"
                    style="width: 100%;"
                  >
                    <el-table-column label="维护编号" align="center" prop="taskNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="维护时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
                    <el-table-column label="维护人" align="center" prop="maintainer"/>
                    <el-table-column label="维护结果" align="center" prop="result" :show-overflow-tooltip="true"/>
                    <el-table-column label="下次维护时间" align="center" prop="nextService" :show-overflow-tooltip="true"/>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          @click="handleEditSale(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                          size="mini"
                          type="text"
                          @click="handleDeleteSale(scope.row)"
                        >删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>

                <pagination v-show="afterTotal>0" :total="afterTotal"
                            :page.sync="afterParams.pageNum"
                            :limit.sync="afterParams.pageSize"
                            @pagination="getAfterList"/>
              </el-tab-pane>
              <el-tab-pane label="维修记录" name="maintain">
                <el-card class="gray-card no-border no-margin-top" shadow="never">

                  <el-table
                    v-loading="maintainLoading"
                    :data="maintainList"
                    style="width: 100%;"
                  >
                    <el-table-column label="维护编号" align="center" prop="checkNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="维护时间" align="center" prop="repairTime" :show-overflow-tooltip="true"/>
                    <el-table-column label="维护人" align="center" prop="maintainer"/>
                    <el-table-column label="维护结果" align="center" prop="result" :show-overflow-tooltip="true"/>
                    <el-table-column label="维护原因" align="center" prop="reason" :show-overflow-tooltip="true"/>
                  </el-table>
                </el-card>

                <pagination v-show="maintainTotal>0" :total="maintainTotal"
                            :page.sync="maintainParams.pageNum"
                            :limit.sync="maintainParams.pageSize"
                            @pagination="getMaintainList"/>
              </el-tab-pane>
            </el-tabs>

          </el-card>
        </el-col>
      </el-row>
      <el-drawer
        title="新增校验记录"
        :visible.sync="checkShow"
        size='65%'
      >
        <addcheck @func='closerDrawer'/>
      </el-drawer>
      <el-drawer
        title="新增维护记录"
        :visible.sync="maintenanceShow"
        size='65%'
      >
        <addMaintenance @closeMain='handleMainAdd'
                        :deviceInfo="deviceInfo"
                        :editSaleInfo="editSaleInfo"
                        :flag="true"
                        ref="mainRef"/>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import deviceInfoCard from '../../../components/deviceInfoCard/index.vue'
import addcheck from './addcheck.vue'
import addMaintenance from './addMaintenance.vue'
import {getInstrument} from "@/api/business/instrument"
import {listDetectionResult, getDetectionResult} from "@/api/business/detectionResult"
import {listQualityControl, getQualityControl} from "@/api/business/qualityControl"
import {listOutControl} from "@/api/business/outControl"
import {listServiceTask, updateServiceTask, delServiceTask} from "@/api/business/serviceTask"
import {listRepairTask} from "@/api/business/repairTask"

export default {
  name: "deviceInfo",
  components: {
    deviceInfoCard,
    addcheck,
    addMaintenance
  },
  data() {
    return {
      editSaleInfo: null,
      maintenanceIsVisible: true,
      checkIsVisible: false,
      checkList: [],
      checkShow: false,
      maintenanceShow: false,
      loading: false,
      redirect: undefined,
      activeName: 'check',
      activeName2: 'afterSale',
      total: 10,
      deviceInfo: {},
      personLiableList: [
        {
          value: 1,
          label: '管理员'
        },
        {
          value: 2,
          label: '科室主任'
        }
      ],
      managerList: [
        {
          value: 1,
          label: '管理员'
        },
        {
          value: 2,
          label: '科室主任'
        }
      ],
      checkTotal: 0,
      checkParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: ''
      },
      inDoorloading: false,
      inDoorList: [],
      inDoorTotal: 0,
      inDoorParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: ''
      },
      comparisonTotal: 0,
      comparisonLoading: false,
      comparisonList: [],
      comparisonParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: ''
      },
      outLoading: false,
      outList: [],
      outTotal: 0,
      outParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: ''
      },
      afterLoading: false,
      afterList: [],
      afterTotal: 0,
      afterParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: ''
      },
      maintainLoading: false,
      maintainList: [],
      maintainTotal: 0,
      maintainParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: ''
      },
    };
  },
  watch: {
    activeName(val, oldVal) {
      if (val == 'check') {
        this.getCheckList()
      } else if (val == 'inDoor') {
        this.getInDoorList()
      } else if (val == 'out') {
        this.getOutList()
      }
    },
    activeName2(val, oldVal) {
      if (val != 'afterSale') {
        this.maintenanceIsVisible = false
        this.getAfterList()
      } else {
        this.maintenanceIsVisible = true
        this.getMaintainList()
      }
    }
  },
  created() {
    this.getDeviceInfo()
  },
  methods: {
    getCheckList() {
      this.checkParams.instrumentNo = this.deviceInfo.instrumentNo
      this.loading = true
      listDetectionResult(this.checkParams).then((res) => {
        this.checkList = res.rows;
        this.checkTotal = res.total;
        this.loading = false;
      })
    },
    getInDoorList() {
      this.inDoorParams.instrumentNo = this.deviceInfo.instrumentNo
      this.inDoorloading = true
      listQualityControl(this.inDoorParams).then((res) => {
        this.inDoorloading = false;
        this.inDoorTotal = res.total;
        this.inDoorList = res.rows;
      })
    },
    getOutList() {
      this.inDoorParams.instrumentNo = this.deviceInfo.instrumentNo
      this.outLoading = true
      listOutControl(this.outParams).then((res) => {
        this.outLoading = false;
        this.outTotal = res.total;
        this.outList = res.rows;
      })
    },
    handleMainAdd() {
      this.maintenanceShow = false
      this.editSaleInfo = null
      this.getAfterList()
    },
    getAfterList() {
      this.afterLoading = true;
      this.afterParams.instrumentNo = this.deviceInfo.instrumentNo
      listServiceTask(this.afterParams).then((res) => {
        this.afterLoading = false;
        this.afterTotal = res.total;
        this.afterList = res.rows;
      })
    },
    getMaintainList() {
      this.maintainLoading = true;
      this.maintainParams.instrumentNo = this.deviceInfo.instrumentNo
      listRepairTask(this.maintainParams).then((res) => {
        this.maintainLoading = false;
        this.maintainTotal = res.total;
        this.maintainList = res.rows;
      })
    },
    handleEditSale(row) {
      this.maintenanceShow = true
      this.$nextTick(() => {
        this.$refs.mainRef.handleData(row)
      })
    },
    handleDeleteSale(row) {
      delServiceTask(row.id).then((res) => {
        this.getAfterList()
      })
    },
    toMaintenance() {
      this.$router.push({path: "/device/maintenance/index"});
    },
    getDeviceInfo() {
      getInstrument(this.$route.query.id).then((res) => {
        this.deviceInfo = res.data
        this.deviceInfo.personLiableName = this.personLiableList.filter(x => x.value == res.data.personLiable)[0].label
        this.deviceInfo.managerName = this.managerList.filter(x => x.value == res.data.manager)[0].label
        this.getCheckList()
        this.getAfterList()
      })
    },
  }
};
</script>
